<html>
<head>
<title>An example of using sprites to follow an object</title>
<style type="text/css">
BODY{overflow:hidden;}
</style>
<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_mouse.js"></script>
<script language="Javascript" src="../gamelib/gamelib_sprites.js"></script>

<script language="Javascript">

var mycounter=0;
var block=new Array();
var blockDegs=new Array(0,90,180,270);	// degrees around penguin (well, we have to make something spin!)

function init(){
	Sp_linuxcompatible=true;
	penguin=new Sp_Sprite();
	penguin.setImage("../images/penguin.gif",64,64,11,2);
	penguin.setXlimits(0,1000);
	penguin.setYlimits(0,1000);
	penguin.moveTo(120,320);

	penguin.makeHard();	// make penguin hard, so the targetting block can't pass through it

	penguin.setFrameByDirection(
		0,0,2,
		1,90,1,	// to save having to set the frames myself each loop, here I tell
		181,270,0,	// the penguin sprite which frames to use for each of the 4 directions
		91,180,3,	// I'm using. Notice these are specified as degrees of a circle,
		271,360,2	
	)

	penguin.setAnimationSpeed(3,"forward");
	penguin.setSpeed(4);

	penguin.setRouteByCommand(
		 "m200,200;"	// move to 200,200
		+"s5;"		// set sprite speed to 5
		+"d135;"		// set direction to 90 degrees
		+"f20;"		// move forward for 30 frames
		+"c54,5;"		// clockwise 3 degrees per frame for 90 frames
		+"f20;"		// move forward for 30 frames
		+"a54,5;"		// anticlockwise 3 degrees per frame for 90 frames"
		+"s8;"		// set sprite speed to 8
		+"d90;"		// set direction to 90 degrees
		+"f30;"		// move forward for 30 frames
		+"C90;"		// add 90 degrees to current direction
		+"f30;"		// move forward for 30 frames
		+"C90;"		// add 90 degrees to current direction
		+"f30;"		// move forward for 30 frames
		+"C90;"		// add 90 degrees to current direction
		+"f30",		// move forward for 30 frames
		true			// loop switch
	);

	penguin.switchOn();

	for(n=0;n<7;n++){	// make 6 block shaped sprites. All use the same image, but
				// set different frames, to make them different colors. This
				// is faster than downloading lots of smaller images!

		block[n]=new Sp_Sprite();
		block[n].setImage("../images/msi0.gif",32,32,6,1);
		block[n].setXlimits(0,1000);
		block[n].setYlimits(0,1000);
		block[n].setSpeed(10);
		block[n].switchOn();
	}

	for (n=0;n<4;n++) block[n].setFrame(3);	// red frame

	block[4].setFrame(0);	// blue frame
	block[5].setFrame(2);	// green frame

	mymouse=Ms_initmouse();

	block[0].follow(penguin,-40,-40);	// surround penguin with red blocks
	block[1].follow(penguin,72,-40);	// actually in this case I'll be updating the
	block[2].follow(penguin,72,72);		// x,y offsets every frame (to make the blocks rotate)
	block[3].follow(penguin,-40,72);	// so the values here are irrelevent really :)

	block[4].follow(mymouse,15,15);		// blue block will follow mouse.
						// make sure you define the mouse BEFORE trying to
						// follow it :)

	block[4].setOpacity(60);		// make this block semi-transparent...

	block[5].setCollides(true);		// new method for setting the collides property

	block[5].target(mymouse,0,0);		// green block will try to hit the mouse's position.
						// offset by 10,10.

	block[5].setHitEvent(penguin,"block[5].setFrame(5)");	// if it hits the penguin, it will
										// turn white!

	block[5].useHitEvents(true);		// remember to tell the sprite to use its hit
							// events!

	Gl_scrollbars("no");			// no scrollbars thanks
	Gl_hook("moveBlocks()");		// hook in my little function to make blocks spin around penguin

	Gl_calibrate('Gl_start()',25)		// set this animation to run at around 25 frames per second
							// then call Gl_start()!
}

// Ok, so now we've set up our sprites, we just need a little function to
// make the blocks revolve around the penguin.

function moveBlocks(){	// this dynamically alters the followingx and followingy
				// properties of the red blocks to make them revolve
				// around the penguin.

	for(var n=0;n<4;n++){
		block[n].followingx=16+(Gl_sin[blockDegs[n]]*60);
		block[n].followingy=16+(Gl_cos[blockDegs[n]]*60);
		blockDegs[n]+=5;
		if(blockDegs[n]>359) blockDegs[n]-=360;
	}
}

</script>
</head>

<body bgcolor="#000000" onload="init()" style="overflow:hidden">
<font color="#ffbb00" face="Arial" size=3>
<u>Sprite library example 3</u><br><br>
<font size=2>
The penguin sprite is using the following a "command route" to move around:<br>
"m200,200;s5;d135;f20;c54,5;f20;a54,5;s8;d90;f30;C90;f30;C90;f30;C90;f30"<br>
The red blocks are following the penguin sprite using the follow method.<br>
The blue block is following the mouse using the same method.<br>
The green block is targetting the mouse (notice the difference!)<br>
If the green block hits the penguin, it's hitEvent will fire, in<br>
this case turning it white. The penguin has also been made<br>
"hard", so the targetting block cannot move through it!
</font>
</font>
</body>

</html>